/*
* Alarm
* author Lijh1221
* */
import base from '../../../../../../assets/scripts/base/base'

export default function Alarm (params) {
  this.target = params.target
  this.AMap = params.AMap
  this.map = {}

  this.data = params.data

  // 初始宽高
  this.w = params.w
  this.h = params.h

  this.mapStyle = params.mapStyle || ''

  this.marker = {}

  // 记录当前点击的位置
  this.clickIndex = 0

  this.value = params.value || {}

  this.tempMarker = {} // 缓存marker
  this.tempPoint = {} // 缓存point
  this.tempInfoWindow = {} // 缓存infoWindow

  this.popWindowTemp = params.popWindowTemp || '' // 弹窗内容自定义
  this.uniqueId = params.uniqueId || 'eventSysId' // 唯一id的name
  this.iconName = params.iconName || 'icon' // icon对应的name

  this.base = base()
}

Alarm.prototype = {

  constructor: Alarm,

  render: function () {
    let $target = $(this.target)
    let AMap = this.AMap
    let data = this.data
    let _this = this

    let html = this.createHtml()
    $target.html(html)

    // 地图生成
    this.map = new AMap.Map('myMap', { mapStyle: this.mapStyle })

    // 无数据的情况
    if (!data.length) {
      let point = new AMap.LngLat(121.423224, 31.223914)
      this.map.setCenter(point)
      this.map.setZoom(19)
    }

    // 遍历数据，生成点
    for (let i = 0, len = data.length; i < len; i++) {
      let item = data[i]
      let tIcon = ''
      if (!this.icon[item.moduleId]) {
        tIcon = '/images/map/dot_1.png'
      } else {
        tIcon = this.icon[item.moduleId]
      }

      let icon = tIcon
      let arr = this.base.transCoordinate(item.gpsLng, item.gpsLat, item.mapType)
      let newLng = arr[0].toFixed(6)
      let newLat = arr[1].toFixed(6)
      let point = new AMap.LngLat(newLng, newLat)
      let marker = new AMap.Marker({
        position: point,
        icon: icon,
        // content: '<div class="fa fa-address-book" style="color: #000; background-color: aqua; border-radius: 100%;padding: 6px;"></div>',
        title: ''
      })

      // let content = item.popType === 'equipment' ? this.equipment.getDefaultTemp(item) : this.createPopHtml(item)
      let content = this.createPopHtml(item)
      let infoWindow = new AMap.InfoWindow({
        content,
        offset: new AMap.Pixel(6, -20)
      })

      this.tempMarker[item[this.uniqueId]] = marker
      this.tempPoint[item[this.uniqueId]] = point
      this.tempInfoWindow[item[this.uniqueId]] = infoWindow

      if (i === 0) {
        this.map.setCenter(point)
        this.map.setZoom(19)
      }

      this.map.add(marker);

      // 防止闭包导致弹出层的数据不对
      (function (iw, it) {
        marker.on('click', function () {
          _this.clickIndex = it[_this.uniqueId]
          // 有内容才显示弹窗
          if (content) {
            iw.open(_this.map, point)
          }
        })
      })(infoWindow, item)
    }
    this.bindEvent()
  },

  // 移动到点位置及打开infoWindow
  moveToDot: function (id) {
    let point = this.tempPoint[id]

    let infoWindow = this.tempInfoWindow[id]
    this.map.setCenter(point)
    infoWindow.open(this.map, point)
  },

  // 播放监控
  showMonitor: function (id) {
    // alert(id)
    this.base.popup({
      content: '<iframe width="800" height="455" src="">'
      // content: '<iframe width="800" height="455" src="http://223.167.111.4:7080/play.html?channel=2">'
    })
  },

  createPopHtml: function (data) {
    if (this.popWindowTemp) {
      return this.popWindowTemp(data)
    } else {
      return ''
    }
  },

  createHtml: function () {
    let html = ''
    html += '<div style="width:' + this.w + ';height:' + this.h + '" id="myMap" class="myMap alarm-content"></div>'
    return html
  },

  // 清空标记
  clearDots: function () {
    this.tempMarker = {}
    this.tempPoint = {}
    this.tempInfoWindow = {}
    this.map.clearMap()
  },

  addDot: function (data, bool) {
    let item = data
    let _this = this

    let AMap = this.AMap

    // 重复的list就不重复显示了
    if (this.tempMarker[item[this.uniqueId]]) {
      return
    }
    let arr = this.base.transCoordinate(item.gpsLng, item.gpsLat, item.mapType)
    let newLng = arr[0].toFixed(6)
    let newLat = arr[1].toFixed(6)
    let point = new AMap.LngLat(newLng, newLat)
    let bgColor = data.bgColor || '#F6511D'
    let marker = new AMap.Marker({
      position: point,
      // icon: icon,
      content: '<div class="' + item[this.iconName] + '" style="color: #fff; background-color: ' + bgColor + '; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 100%; font-size: 16px;"></div>',
      title: ''
    })

    let content = this.createPopHtml(item)
    let infoWindow = new AMap.InfoWindow({
      content,
      offset: new AMap.Pixel(6, -20)
    })
    if (bool) {
      this.map.setCenter(point)
      // this.map.setZoom(19);
    }

    this.tempMarker[item[this.uniqueId]] = marker
    this.tempPoint[item[this.uniqueId]] = point
    this.tempInfoWindow[item[this.uniqueId]] = infoWindow
    this.map.add(marker);

    // 防止闭包导致弹出层的数据不对
    (function (iw, it) {
      marker.on('click', function () {
        _this.clickIndex = it[_this.uniqueId]
        // 有内容才显示弹窗
        if (content) {
          iw.open(_this.map, point)
        }
        // $target.find('.mapStyle-video').on('click', function (e) {
        //   _this.showMonitor(it.eventSysId);
        // })
      })
    })(infoWindow, item)
  },

  bindEvent: function () {
    let $target = $(this.target)
    let _this = this

    // infoWindow事件
    $target.on('click', '.mapStyle-video', function (e) {
      let id = $(this).attr('data-id')
      _this.showMonitor(id)
    })
  },

  // 销毁组件
  destroy: function () {
    let $target = $(this.target)
    $target.empty()
  },

  init: function () {
    this.render()
  }

}
